import React, { useState } from 'react'
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'
import './add.css'
import axios from 'axios'
export default function Add() {
	const navigate = useNavigate()
	const [name, setName] = useState('')
	const [content, setContent] = useState('')
	const [Listr, setListr] = useState(['green', 'red', 'orange', 'blue', 'pink'])
	const [ind, setIndex] = useState(-1)
	const addt = () => {
		let from = { name: name, content: content, color: Listr[ind] }
		if(name=='' || content=='' || ind==-1){
			return 
		}
		axios.post(`http://localhost:3000/addtype`, from).then(res => {
			let { code, msg } = res.data
			if (code == 200) {
				navigate('/')
			} else {
				setName('')
				setContent('')
				setIndex(-1)
			}
		})
	}
	const quxiao = () => {
		setName('')
		setContent('')
		setIndex(-1)
	}
	return (
		<div>
			<nav className='main'>
				<div className='sizx'></div>
				<div className='he'>
					<div className='fentop'><span>创建项目</span>
						<span onClick={() => { navigate('/') }}>X</span>
					</div>
					<div className='liu'>
						<p>项目名称</p>
						<input type="text" value={name} onChange={e => { setName(e.target.value) }} placeholder='请输入内容' />
					</div>
					<div className='fentop' style={{ width: '50%' }}>
						{Listr.map((item, index) => {
							return <div key={index} onClick={() => { setIndex(index) }}>
								<span className={index == ind ? 'heia' : 'heis'} style={{ backgroundColor: item }}></span>
							</div>
						})}
					</div>
					<div>
						<p>项目描述</p>
						<textarea value={content} cols="30" rows="10" onChange={e => {
							setContent(e.target
								.value)
						}} placeholder='请输入内容'></textarea>
					</div>
					<div className='fenmtopa'>
						<span></span>
						<span><button onClick={() => { addt() }}>确定</button>
							<button onClick={() => { quxiao() }}>取消</button></span>
					</div>
				</div>
			</nav>
		</div>
	)
}
